<style lang="less" scoped>
    .container{
        margin-top: 3rem;
    }
    .btn-device{
        margin-top: 2rem;
    }
</style>
<template>
    <div>
        <x-header style="width:100%;position:fixed;left:0;top:0;z-index:100;" >
            <span>添加设备</span>
            <x-icon slot="overwrite-left" @click="back" type="ios-arrow-back" size="35"
                    style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
        </x-header>
        <div class="container">
            <group title="选择">
                <selector title="区域"  :options="areaList" @on-change="areaChange" v-model="dataForm.areaId"></selector>
                <selector title="建筑" :options="buildList" @on-change="buildChange"   v-model="dataForm.buildId"></selector>
                <selector title="集中器"  :options="conList" @on-change="conChange"  v-model="dataForm.concentratorId"></selector>
                <selector title="节点"  :options="nodeList" @on-change="nodeChange"  v-model="dataForm.nodeId"></selector>
                <selector title="回路"  :options="circuitList" @on-change="circuitChange"  v-model="dataForm.circuitId"></selector>
            </group>
            <x-button class="btn-device" @click.native="addSwitch" type="primary">添加</x-button>
        </div>
    </div>
</template>


<script>
    export default{
        data(){
            return {
                dataForm:{
                    areaId:0,
                    buildId:0,
                    concentratorId:0,
                    nodeId:0,
                    circuitId:0,
                    pieceId:0,
                },
                areaList:[],
                buildList:[],
                conList:[],
                nodeList:[],
                circuitList:[],
            }
        },
        components: {},
        computed: {},
        methods: {
            back(){
                this.$router.back();
            },
            getId(){
                if(this.$route.params != null && this.$route.params.id != null){
                    this.dataForm.pieceId = this.$route.params.id;
                }
            },
            addSwitch(){
                this.$store.dispatch("AddSceneSwitch",this.dataForm).then((response)=>{
                    if(response.status == 1){
                        this.back();
                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }
                }).catch((error)=>{

                })
            },
            getArea(){
                let data = {
                    parentId:0,
                    deviceRange:0
                };
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let areas = [];
                    areas.push({
                        key:0,
                        value:'未指定'
                    })
                    if (data.status == 1) {
                        data.result.forEach(function (item,index) {
                            areas.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.areaList = areas;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }

                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getBuild(){
                let data = {
                    parentId:this.dataForm.areaId,
                    deviceRange:1
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let builds = [];

                    if (data.status == 1) {
                        builds.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            builds.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.buildList = builds;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getCon(){
                let data = {
                    parentId:this.dataForm.buildId,
                    deviceRange:2
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let cons = [];
                    if (data.status == 1) {
                        cons.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            cons.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.conList = cons;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getNode(){
                let data = {
                    parentId:this.dataForm.concentratorId,
                    deviceRange:3
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let nodes = [];
                    if (data.status == 1) {
                        nodes.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            nodes.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.nodeList = nodes;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getCircuit(){
                let data = {
                    parentId:this.dataForm.nodeId,
                    deviceRange:4
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let circuits = [];
                    if (data.status == 1) {
                        circuits.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            circuits.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.circuitList = circuits;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            areaChange(value){
                this.dataForm.areaId = value;
                this.getBuild();
            },
            buildChange(value){
                this.dataForm.buildId= value;
                this.getCon();
            },
            conChange(value){
                this.dataForm.concentratorId = value;
                this.getNode();
            },
            nodeChange(value){
                this.dataForm.nodeId=value;
                this.getCircuit();
            },
            circuitChange(value){
                this.dataForm.circuitId=value;
            }
        },
        created: function () {
            this.getId();
            this.getArea();
        }
    }
</script>
